<template>
	<view class="max-box">
		<view class="fater">
			<view class="assets">
				<view class="total-assets">
					<view class="total">总资产(元)</view>
					<view class="money">0</view>
				</view>
				<view>
					<view class="balance">

						<view class="total-assets">
							<view class="total">可用余额(元)</view>
							<view class="money-total">0</view>
						</view>

						<view class="total-assets">
							<view class="total">可提现金额(元)</view>
							<view class="money-total">0</view>
						</view>

					</view>
				</view>

			</view>
			<view class="reflect">
				<view class="q" @click="withdrawalClick">提现</view>
				<view class="recharge" @click="rechargeClick">充值</view>
			</view>
		</view>
		<view class="detailed">
			<view class="detailed-list" v-for="item in detailedlist">
				<view class="list-icon">
					<image src="../../static/logo.png" mode="" class="image"></image>
				</view>
				<view class="list-text">{{item.text}}</view>
			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailedlist: [{
						text: '余额转账'
					},
					{
						text: '账户明细'
					},
				]
			};
		},
		methods: {
			withdrawalClick() {
				uni.navigateTo({
					url: '/pages/withdrawal/withdrawal'
				})
			},
			rechargeClick() {
				uni.navigateTo({
					url: '/pages/recharges/recharges'
				})

			}
		}
	}
</script>

<style lang="scss">
	.max-box {
		background-color: #F4F4F4;
		height: 100vh;
		padding: 25rpx;
		box-sizing: border-box;
	}

	.fater {
		width: 90%;
		padding: 25rpx;
		background-color: #ffffff;
		border-radius: 25rpx;
	}

	.assets {
		height: 350rpx;
		border-radius: 25rpx;
		background-color: #FD498F;
		margin: 0 auto;
		padding: 60rpx 0rpx 0rpx 0rpx;
	}

	.total-assets {
		text-align: center;
		box-sizing: content-box;
	}

	.total {
		color: #ffffff;
		font-size: 35rpx;
	}

	.money {
		color: #ffffff;
		font-size: 65rpx;
	}

	.money-total {
		color: #ffffff;
		font-size: 45rpx;
	}

	.balance {
		display: flex;
		justify-content: space-around;
		align-items: center;
		// justify-items: center;
	}

	.reflect {
		margin-top: 35rpx;
		display: flex;
		justify-content: space-between;

	}

	.recharge {
		text-align: center;
		padding: 39rpx 125rpx;
		background-color: #F4F4F4;
		border-radius: 17rpx;
	}

	.q {
		background-color: #FA444D;
		text-align: center;
		color: white;
		padding: 39rpx 125rpx;
		border-radius: 17rpx;
	}

	.detailed {
		display: flex;
		margin-top: 40rpx;
	}

	.detailed-list {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		margin-right: 20rpx;
		background-color: #ffffff;
		padding: 40rpx 70rpx 50rpx 70rpx;
		border-radius: 15rpx;
	}

	.list-icon {
		width: 70rpx;
		height: 70rpx;
		margin: 0 auto;
	}

	.image {
		width: 100%;
		height: 100%;
	}

	.list-text {
		font-size: 35rpx;
		margin-top: 10rpx;
	}
</style>